<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <script src="../vuex.min.js"></script>
    <script src="./day07/jquery-3.5.0.min.js"></script>
    <script>
        window.onload=function(){
            //1.实例化
            var store=new Vuex.Store({
                state:{
                    //数据维护/初始化实例对象-data
                    list:[]
                },
                getters:{
                    //获取器-计算属性
                    list:state=>state.list
                },
                mutations:{
                    //突变-methods-》同步函数 改变state的数据
                    addMemo(state,memo){
                        state.list.push(memo);   
                    },
                    delMemo(state,id){
                        state.list=state.list.filter((item)=>{
                            return item.id!=id
                        })
                    }
                },
                actions:{
                    //动作 -methods -》异步函数
                    getData(context,memo){
                        $.ajax({
                            url:"http://47.106.244.1:8099/manager/category/findAllCategory",
                            success:function(data){
                                console.log(data);
                                //触发突变
                                context.commit('addMemo',memo);
                            }
                        })
                    },
                }
            });
            //2.注入vue根实例对象中
            new Vue({
                el:'#app',
                store,//注入store
                data:{
                    msg:'',
                    index:1
                },
                computed:{
                    list:function(){
                        //从state中获取list
                        //return this.$store.state.list;
                         //从getters中获取list
                         return this.$store.getters.list
                    }
                },
                methods:{
                    addMemo(){
                        var memo={
                            id:this.index,
                            msg:this.msg,
                            time:new Date().toLocaleString()
                        }
                        //this.list.push(memo);
                        //1.触发突变,传递memo参数
                        //this.$store.commit("addMemo",memo)
                        //2.异步函数
                        this.$store.dispatch('getData',memo)
                        this.index++;
                        this.msg='';
                    },
                    delMemo(id){
                        //1.触发突变，传递id
                        this.$store.commit('delMemo',id);   
                    }
                }
            })
        }
    </script>
</head>
<body>
    <div id="app">
        <h2>备忘录</h2>
        <form action="#" @submit.prevent='addMemo'>
            <input type="text" v-model='msg'>
            <input type="submit" value="保存">
        </form>
        <ul>
            <li v-for='item in list'>
                <span>{{item.id}}、</span>
                <span>{{item.msg}}、</span>
                <span>{{item.time}}</span>
                <a href="#" @click='delMemo(item.id)'>删除</a>
            </li>
        </ul>
    </div>
</body>
</html>